<template>
	<view>
		<u-navbar title="交易市场" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#10191F" rightText="" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<view class="modele">
			<view class="modele_box" :class="{ active: ids==item.id}" v-for="(item,index) in tablist" :key="index"
				@click="clickToggleHandle(item)">
						{{item.car_name}}
			</view>
		</view>
		
		<view class="main">
			<view class="tit">
				交易大厅
				<text   v-if="carid==ids" @click="changes">{{is_need==0?"仅显示我需要的":"全部"}}</text>
			</view>
			<view class="wrap">
				<view class="wrapitem" v-for="item in selllist" :key="item.id" @click="selectitem(item)">
					<view class="num">
						{{item.number>99?"99":item.number}}
					</view>
					<view class="imgwrap">
						<image  class="logo" :src="item.car_logo" mode=""></image>
						<image v-if="item.level==3" class="bg" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="item.level==2" class="bg" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="item.level==1" class="bg" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image" :src="item.images" mode=""></image>
					</view>
					<text v-if="item.level==1" class="text1">{{item.name}}</text>
					<text v-if="item.level==2" class="text2">{{item.name}}</text>
					<text v-if="item.level==3" class="text3">{{item.name}}</text>
				</view>
			</view>
			<noDatas :xxxList="selllist" :type="2" :status="status" :showMore="false"></noDatas>
		</view>
		<u-popup :show="show" mode="center" @close="show=false" bgColor="transparent">
			<view class="wrap2">
				<view class="wrapitem2">
					<view class="imgwrap2">
						<image  class="logo2" :src="selitem.car_logo" mode=""></image>
						<image v-if="selitem.level==3" class="bg2" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="selitem.level==2" class="bg2" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="selitem.level==1" class="bg2" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image2" :src="selitem.images" mode=""></image>
					</view>
					<text v-if="selitem.level==1" class="text11">{{selitem.name}}</text>
					<text v-if="selitem.level==2" class="text12">{{selitem.name}}</text>
					<text v-if="selitem.level==3" class="text13">{{selitem.name}}</text>
					<view class="price2">
						零售价：{{selitem.price}}
					</view>
					<view class="btn2" @click="payitem">
						购买
					</view>
				</view>
			</view>

		</u-popup>
		<u-popup :show="showsuc" mode="center" @close="showsuc=false" bgColor="transparent">
			<view class="wrap2">
				<view class="wrapitem2">
					<view class="imgwrap2">
						<image  class="logo2" :src="selitem.car_logo" mode=""></image>
						<image v-if="selitem.level==3" class="bg2" src="../../static/image/goldbg.png" mode=""></image>
						<image v-if="selitem.level==2" class="bg2" src="../../static/image/yinbg.png" mode=""></image>
						<image v-if="selitem.level==1" class="bg2" src="../../static/image/tongbg.png" mode=""></image>
						<image class="image2" :src="selitem.images" mode=""></image>
					</view>
					<text v-if="selitem.level==1" class="text11">{{selitem.name}}</text>
					<text v-if="selitem.level==2" class="text12">{{selitem.name}}</text>
					<text v-if="selitem.level==3" class="text13">{{selitem.name}}</text>
					<view class="price2">
						零售价：{{selitem.price}}
					</view>
					<view class="btn2" @click="showsuc=false">
						购买成功
					</view>
				</view>
			</view>
		
		</u-popup>
		<u-popup :show="tipShow2" mode="center" @close="tipShow2=false" bgColor="transparent">
			<view class="wrap2" style="height: 400rpx;width: 600rpx;">
				<view class="tit">
					提示
				</view>
				<view class="content">
					您已装配该配件，是否仍需购买？
				</view>
				<view class="btnwrap">
					<view class="btnitem" @click="tipShow2=false">
						取消
					</view>
					<view class="btnitem" @click="tipShow=true,tipShow2=false">
						确定
					</view>
				</view>
			</view>
		
		</u-popup>
		<u-popup :show="tipShow" mode="bottom" @close="tipShow = false" closeable bgColor="transparent">
			<view class="pay_main">
				<view class="tit">
					购买信息
				</view>
				<view class="item">
					<text>支付项目</text>
					<text>{{selitem.name}}</text>
				</view>
				<view class="item">
					<text>购买数量</text>
					<text>1个</text>
				</view>
				<view class="item">
					<text>应支付金额</text>
					<text>{{selitem.price}}</text>
				</view>
				<view class="tit">
					支付方式
				</view>

				<view class="item" v-if="pay8">
					<view class="pay_item" @click="selpay(1)">
						<image src="/static/icon/sno.png" mode="" v-if="!ispay1"></image>
						<image src="/static/icon/syes.png" mode="" v-if="ispay1"></image>
						<text>交易余额</text>
					</view>
					<text>{{info.carpool_balance}}</text>
				</view>
				<view class="item" v-if="pay4">
					<view class="pay_item" @click="selpay(2)">
						<image src="/static/icon/sno.png" mode="" v-if="!ispay2"></image>
						<image src="/static/icon/syes.png" mode="" v-if="ispay2"></image>
						<text>福合元宝</text>
					</view>
					<text>{{info.balance_hf}}</text>
				</view>
				<view class="item" v-if="pay7">
					<view class="pay_item" @click="selpay(5)">
						<image src="/static/icon/sno.png" mode="" v-if="!ispay5"></image>
						<image src="/static/icon/syes.png" mode="" v-if="ispay5"></image>
						<text>生态积分</text>
					</view>
					<text>{{info.integral}}</text>
				</view>
				<view class="item" v-if="pay3">
					<view class="pay_item" @click="selpay(4)">
						<image src="/static/icon/sno.png" mode="" v-if="!ispay4"></image>
						<image src="/static/icon/syes.png" mode="" v-if="ispay4"></image>
						<text>福合通宝</text>
					</view>
					<text>{{info.balance}}</text>
				</view>
				<view class="item" v-if="pay9">
					<view class="pay_item" @click="selpay(3)">
						<image src="/static/icon/sno.png" mode="" v-if="!ispay3"></image>
						<image src="/static/icon/syes.png" mode="" v-if="ispay3"></image>
						<text>组合支付</text>
					</view>
					<!-- <text style="font-size: 24rpx;">优先使用交易余额。不足部分使用福合元宝</text> -->
				</view>
				<view class="btn" @click="sub">
					确定
				</view>
				<view class="btn" @click="tipShow=false">
					取消
				</view>
			</view>

		</u-popup>
		<u-popup :show="keyboardShow" mode="center" @close="keyboardShow=false" closeable bgColor="transparent">
			<view class="pass_box flex_ZC">
				<text class="pwd_tit">请输入交易密码</text>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#0071C7" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="pwd_box flex_ld">
					<text class="pwd_box_btn flex_c" @click="keyboardShow=false,securityPwd=''">取消</text>
					<text  :disabled="isButtonDisabled"  class="pwd_box_btn flex_c" @click="setorder()">确认</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="completeShow" mode="center" @close="completeShow=false" bgColor="transparent">
			<view class="parts flex_ZC" >
				<text class="congratulations">恭喜</text>
				<image src="../../static/emjoy/bang.png" mode="aspectFill"></image>
				<text class="tishi">耶！拼车完成了</text>
				<view class="parts_btn flex_c" @click="completeShow = false" >
					<text>好的</text>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		carindex,
		carinfo,
		hallList,
		carAccount,
		carpayType,
		createOrder
	} from "../../api/mycar.js"
	export default {
		data() {
			return {
				tipShow: false,
				ispay1: true, //
				ispay2: false,
				ispay3: false,
				ispay4: false,
				ispay5:false,
				paytype: 8, //3通宝4元宝7生态积分8交易余额，9混合支付
				keyboardShow: false,
				password: "",
				installment_id: "",
				tablist: [

				],
				ids: "",
				page: 1,
				size: 30,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				selllist: [],
				carid: "",
				is_need: 1,
				is_needval: 1,
				selitem: {

				},
				info: {},
				pay3: false,
				pay4: false,
				pay7: false,
				pay8: false,
				pay9: false,
				show:false,
				 isButtonDisabled: false, // 按钮初始状态为可点击
				 tipShow2:false,
				 completeShow:false,
				 showsuc:false
			}
		},
		onLoad() {
			this.getinfo()
			this.getcarAccount()
		},
		methods: {
			payitem(){
				if(this.selitem.is_have==1){
					// this.tipShow2=true
					// this.show=false
					uni.$u.toast("您已拥有该配件，无需购买")
				}else{
					this.tipShow=true
					this.show=false
				}
			},
			sub(){
				if(this.paytype==3){
					if( Number(this.info.balance)<Number(this.selitem.price)){
						uni.$u.toast("福合通宝余额不足")
					}else{
						this.keyboardShow=true
					}
				}else if(this.paytype==4){
					if( Number(this.info.balance_hf)<Number(this.selitem.price)){
						uni.$u.toast("福合元宝余额不足")
					}else{
						this.keyboardShow=true
					}
				}else if(this.paytype==8){
					if( Number(this.info.carpool_balance)<Number(this.selitem.price)){
						uni.$u.toast("交易余额不足")
					}else{
						this.keyboardShow=true
					}
				}else{
					this.keyboardShow=true
				}
			},
			setorder() {
				if (this.password.length < 6) {
					uni.$u.toast("请输入交易密码")
				} else {
					if (this.isButtonDisabled) return; // 如果按钮已禁用，则不执行
					this.isButtonDisabled = true;
					uni.showLoading({
						title:"购买中",
						mask:true
					})
					createOrder({
						password: this.password,
						carpool_accessory_id: this.selitem.carpool_accessory_id,
						pay_type: this.paytype,
						number: 1
					}).then(res => {
						 this.isButtonDisabled = false;
						 uni.hideLoading()
						if (res.code == 1) {
							this.keyboardShow = false
							this.tipShow = false
							this.password = ''
							this.page = 1
							this.showsuc=true
							this.getselllist()
							this.getcarAccount()
							
							if(res.data.is_completed==1){
								this.completeShow=true
							}
						}else{
							uni.$u.toast(res.msg)
						}
					})
				}
			},
			getpaytype() {
				carpayType({
					carpool_accessory_id: this.selitem.carpool_accessory_id
				}).then(res => {
					if (res.code == 1) {
						let pay3 = res.data.pay_type_data.includes(3)
						let pay4 = res.data.pay_type_data.includes(4);
						let pay7 = res.data.pay_type_data.includes(7);
						let pay8 = res.data.pay_type_data.includes(8);
						let pay9 = res.data.pay_type_data.includes(9);
						this.pay3 = pay3 ? true : false;
						this.pay4 = pay4 ? true : false;
						this.pay7 = pay7 ? true : false;
						this.pay8 = pay8 ? true : false;
						this.pay9 = pay9 ? true : false;
						this.paytype = res.data.pay_type_data[0]
						console.log(this.paytype)
						if (this.paytype == 3) {
							this.selpay(4)
						} else if (this.paytype == 4) {
							this.selpay(2)
						} else if (this.paytype == 8) {
							this.selpay(1)
						}else if(this.paytype == 7){
							this.selpay(5)
						} else if (this.paytype == 9) {
							this.selpay(3)
						}
					}
				})
			},
			getcarAccount() {
				carAccount().then(res => {
					this.info = res.data
				})
			},
			selectitem(item) {
				if(this.ids!=this.carid){
					uni.$u.toast("不能购买其他车的配件")
				}else if(item.number==0){
					return false
				}else{
					this.show = true
					this.selitem = item
					this.getpaytype()
					console.log(item, "ssadasd")
				}
			
			},
			changes() {
				this.is_need = !this.is_need,
					console.log(this.is_need, "需要")
				if (this.is_need == true) {
					this.is_needval = 1
				} else {
					this.is_needval = 0
				}
				this.page = 1
				this.getselllist()
			},
			getselllist() {
				uni.showLoading({
					title:"加载中",
					mask:true
				})
				hallList({
					page: this.page,
					carpool_target_id: this.ids,
					is_need: this.is_needval
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let list = res.data.data;
						this.selllist = this.page == 1 ? list : this.selllist.concat(list);
						// console.log(this.goodlist2);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}

				})
			},
			clickToggleHandle(ele) {
				this.ids = ele.id
				if(this.ids!=this.carid){
					this.is_need=0
					this.is_needval=0
				}else{
					this.is_need=1
					this.is_needval=1
				}
				
				// this.carid=this.ids
				this.selllist=[]
				this.page = 1
				this.getselllist()
				// this.getdetail()
				// ele.select = true

			},
			gettablist() {
				carinfo({
					id: this.installment_id
				}).then(res => {
					this.ids = this.carid
					this.selid = res.data.carpool_target[0].id
					console.log(this.ids, "998saadsdads")
					this.tablist = res.data.carpool_target
					console.log(this.tablist)
					this.getselllist()
				})
			},
			getinfo() {
				carindex().then(res => {
					this.installment_id = res.data.member_carpool.installment_id
					this.carid = res.data.member_carpool.carpool_target_id
					console.log(this.installment_id, "asasd")
					this.gettablist()
				})
			},
			selpay(num) {
				if (num == 1) {
					this.ispay1 = true
					this.ispay2 = false
					this.ispay3 = false
					this.ispay4 = false
					this.ispay5=false
					this.paytype = 8
				}
				if (num == 2) {
					this.ispay1 = false
					this.ispay2 = true
					this.ispay3 = false
					this.ispay4 = false
					this.ispay5=false
					this.paytype = 4
				}
				if (num == 3) {
					this.ispay1 = false
					this.ispay2 = false
					this.ispay3 = true
					this.ispay4 = false
					this.ispay5=false
					this.paytype = 9
				}
				if (num == 4) {
					this.ispay1 = false
					this.ispay2 = false
					this.ispay3 = false
					this.ispay4 = true
					this.ispay5=false
					this.paytype = 3
				}
				if (num == 5) {
					this.ispay1 = false
					this.ispay2 = false
					this.ispay3 = false
					this.ispay4 = false
					this.ispay5 = true
					this.paytype = 7
				}
				console.log(this.paytype)
			},
			gopay() {
				this.tipShow = true
			},
			right() {
				uni.navigateTo({
					url: "/pagesMy/nationalCarPooling/transactionHistory"
				})
			},
			leftClick() {
				//获取页面栈的长度
				uni.navigateBack()

			},
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getselllist()
			}
		},
	}
</script>
<style>
	page {
		background: #10191F !important;
	}
</style>
<style scoped lang="scss">
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	/deep/ .u-navbar__content__title {
		color: #fff !important;
	}

	/deep/.uicon-arrow-left {
		color: #fff !important;
	}

	/deep/ .u-navbar__content__right__text {
		color: #fff !important;
	}
	.parts {
		width: 660rpx;
		min-height: 540rpx;
		background: url('../../static/image/tcImg.png');
		background-size: 100% 100%;
		padding: 20rpx 0;
	}

	.parts>image {
		width: 252rpx;
		height: 252rpx;
		margin-top: 20rpx;
	}

	.congratulations {
		font-family: 'iconfont2';
		font-size: 46rpx;
		background: linear-gradient(90deg, #26A4F2, #ffffff);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.parts_box {
		display: flex;
		width: 646rpx;
		overflow-x: auto;
		margin-top: 30rpx;
	}

	.parts_box_s {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 280rpx;
	}
	.parts_btn {
		width: 594rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #ffffff;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 12rpx;
		margin-top: 30rpx;
		margin-bottom: 24rpx;
	}
	.tips_txt{
		margin-top: 50rpx;
	}
	.parts_btn_s{
		width: 180rpx;
		height: 60rpx;
		font-size: 32rpx;
		color: #ffffff;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 12rpx;
		margin: 70rpx 0 30rpx;
	}
	
	
	
	.tishi {
		width: 580rpx;
		margin: 0 auto;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
	}
	
	.partsimg {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		/* animation: breathe 2s ease-in-out infinite; */
	}
	.modele {
		width: 690rpx;
		display: flex;
		margin: 0 auto;
		justify-content: space-evenly;
		overflow-x: auto;
		height: 64rpx;
		background: #162430;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		line-height: 64rpx;
	
	}
	
	.modele_box {
		width: 180rpx !important;
		/* width: 750rpx; */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		flex-shrink: 0;
		line-height: 64rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	.modele_box {
		text-align: center;
	}
	.tab-nav {
		width: 690rpx;
		height: 64rpx;
		background: #162430;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		// margin: 0 auto;
		display: flex;
		// justify-content: space-around;
		// align-items: center;
		flex-wrap:nowrap;
		overflow-x: auto;
		.tab-nav-item {
			width: 600rpx !important;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 0.8);
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
	}

	.active {
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.main {
		width: 690rpx;
		min-height: 502rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		padding-bottom: 40rpx;

		.tit {
			width: 690rpx;
			text-align: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			padding-top: 30rpx;
			position: relative;

			>text {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}

		.wrap {
			width: 690rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.wrapitem {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 12rpx;
				margin-top: 20rpx;
				position: relative;

				.num {
					position: absolute;
					top: 4rpx;
					right: 4rpx;
					z-index: 9;
					width: 40rpx;
					height: 30rpx;
					background: #000000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					// opacity: 0.7;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 30rpx;
				}

				.imgwrap {
					width: 128rpx;
					height: 128rpx;
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					.logo{
						width: 30rpx;
						height: 32rpx;
						position: absolute;
						z-index: 9;
						top: 4rpx;
						left: 8rpx;
						border-top-left-radius:8rpx ;
					}
					.bg {
						width: 128rpx;
						height: 128rpx;
						position: absolute;
						top: 0rpx;
					}

					.image {
						transform: translate();
						width: 100rpx;
						height: 100rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
					}
				}

				.text1 {
					margin-top: 10rpx;
					width: 128rpx;
					text-align: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #FDBE67;
				}

				.text2 {
					margin-top: 10rpx;
					width: 128rpx;
					text-align: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #9FC1FF;
				}

				.text3 {
					margin-top: 10rpx;
					width: 128rpx;
					text-align: center;
					font-weight: 400;
					font-size: 26rpx;
					color: #FBF73B;
				}
			}


		}
	}
	.wrap2 {
		width: 656rpx;
		height: 500rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		.tit{
			width: 500rpx;
			text-align: center;
			margin: 0 auto;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
		}
		.btnwrap{
			width: 500rpx;
			display: flex;
			margin: 0 auto;
			margin-top: 80rpx;
			justify-content: space-around;
			.btnitem{
				width: 200rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				background: #111B23;
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
		.content{
			padding-top: 40rpx;
			width: 500rpx;
			margin: 0  auto;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
		}
		.wrapitem2 {
			display: flex;
			flex-direction: column;
			position: relative;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			.num2 {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				z-index: 99;
				width: 40rpx;
				height: 30rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				// opacity: 0.7;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 30rpx;
			}
			.btn2{
				width: 594rpx;
				height: 80rpx;
				box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				margin: 0 auto;
				margin-top: 30rpx;
			}
			.price2{
				width: 656rpx;
				text-align: center;
				font-weight: 400;
				font-size: 40rpx;
				color: #FFFFFF;
				font-family: iconfont2;
				margin-top: 24rpx;
			}
			.imgwrap2 {
				width: 180rpx;
				height: 180rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				.logo2{
					width: 30rpx;
					height: 32rpx;
					position: absolute;
					z-index: 9;
					top:4rpx;
					left: 20rpx;
					border-top-left-radius: 8rpx;
				}
				.bg2 {
					width: 158rpx;
					height: 158rpx;
					position: absolute;
					top: 0rpx;
				}
	
				.image2 {
					transform: translate();
					width: 100rpx;
					height: 100rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
				}
			}
	
			.text11 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FDBE67;
			}
	
			.text12 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #9FC1FF;
			}
	
			.text13 {
				margin-top: 10rpx;
				width: 128rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #FBF73B;
			}
		}
	
	
	}
	.pay_main {
		width: 750rpx;
		height: 874rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.btn {
			width: 686rpx;
			height: 80rpx;
			box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 40rpx;

		}

		.tit {
			width: 750rpx;
			text-align: center;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			padding-top: 30rpx;
		}

		.item {
			display: flex;
			width: 710rpx;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 28rpx;

			.pay_item {
				display: flex;
				align-items: center;

				>image {
					margin-right: 10rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	.pass_box {
		width: 602rpx;
		height: 406rpx;
		background: #111B23;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		border-radius: 20rpx;
		z-index: 8;
	}

	.pwd_tit {
		width: 602rpx;
		text-align: center;
		font-size: 36rpx;
		color: #ffffff;
		padding-top: 50rpx;
		margin-bottom: 70rpx;
	}

	.code_input {
		margin: 0 auto;
	}

	.pwd_box {
		width: 522rpx;
		height: 72rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.pwd_box_btn {
		width: 220rpx;
		height: 72rpx;
		border-radius: 12rpx;
		box-shadow: inset 0rpx 0rpx 20rpx 0rpx #1C85DB;
		font-size: 28rpx;
		color: #ffffff;
	}
</style>